<template>
  <div class="regist-container">
    <el-form
      :model="form"
      :rules="rules"
      ref="registForm"
      label-position="top"
      class="regist-form"
      @keyup.enter="submitRegist"
    >
      <div class="back-button">
        <router-link to="/prior/login" class="back-link">
          <el-icon style="font-size: 24px;"><ArrowLeftBold /></el-icon>
        </router-link>
      </div>
      <h2 class="title">用户注册</h2>
      <el-form-item label="用户名" prop="userAccount">
        <el-input
          v-model="form.userAccount"
          placeholder="请输入用户名"
          class="input-with-icon"
        >
          <template #prefix>
            <el-icon><User class="prefix-icon" /></el-icon>
            <div class="icon-separator"></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input
          v-model="form.userPassword"
          type="password"
          placeholder="请输入密码"
          class="input-with-icon"
          show-password>
          <template #prefix>
            <el-icon><Lock class="prefix-icon" /></el-icon>
            <div class="icon-separator"></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="userName">
        <el-input
          v-model="form.userName"
          placeholder="请输入真实姓名"
          class="input-with-icon"
        >
          <template #prefix>
            <el-icon><User class="prefix-icon" /></el-icon>
            <div class="icon-separator"></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="角色" prop="userRole">
        <el-radio-group v-model="form.userRole" class="gender-radio-group">
          <el-radio label="客户"><span>客户</span></el-radio>
          <el-radio label="员工"><span>员工</span></el-radio>
          <el-radio label="管理员"><span>管理员</span></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button
        type="primary"
        @click="submitRegist"
        class="regist-btn"
      >
        注册
      </el-button>
      <div class="login-link">
        <span>已有账号？</span>
        <router-link to="/prior/login">立即登录</router-link>
      </div>
    </el-form>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { RegisterServer } from '@/api/instance';
  import { useUserStore } from '@/stores';
  import { storeToRefs } from 'pinia';

  const router = useRouter();
  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore)

  const form = reactive({
    userAccount: '',
    userPassword: '',
    userName: '',
    userRole:'客户'
  });

  const registForm = ref(null);

  const rules = {
    userAccount: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 1, max: 16, message: '长度1-16位', trigger: 'blur' },
    ],
    userPassword: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 8, message: '长度大于等于8位', trigger: 'blur' },
    ],
    userName: [
      { required: true, message: '请输入真实姓名', trigger: 'blur' },
      { min: 2, max: 16, message: '长度2-16位', trigger: 'blur' },
    ],
    userRole: [
      { required: true, message: '请选择注册角色', trigger: 'change' },
    ],
  };

  const submitRegist = async () => {
    if (!registForm.value) return;
    await registForm.value.validate(async valid => {
      if (valid) {
        try {
          const res = await RegisterServer(form);
          if (res.code === 0) {
            ElMessage.success('注册成功');
            router.push('/prior/login');//跳到登录界面
            // 清空表单
            Object.assign(form, {
              userAccount: '',
              userPassword: '',
              userName: '',
              userRole:'客户'
            });
          } else {
            ElMessage.error(res.message || '注册失败');
          }
        } catch (error) {
          ElMessage.error('注册失败，请重试');
        }
      }else{
        ElMessage.error('输入格式有误');
      }
    });
  };
</script>

<style lang="scss" scoped>
span {
  font-family: '黑体', sans-serif; /* 全局字体 */
  font-weight: bold; /* 全局加粗 */
}

.regist-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f2f5;
  font-family: '黑体', sans-serif; /* 全局字体 */
  font-weight: bold; /* 全局加粗 */
  .regist-form{
    width: 400px;
    padding: 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-align: left;//防止继承影响
    .back-button{
      position: relative;
      left: 0%;
      top: 0%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      margin:5px 0px;
      padding:0px;
      .back-link{
        text-decoration: none;
        width: 100%;
        height: 100%;
        padding: 0px;
        svg{
          color:#409eff;
          font-size: 24px;
          width: 100%;
          height: 100%;
        }
      }
    }
    .title{
      margin-bottom: 30px;
      text-align: center;
      color: #333;
    }
    .input-with-icon{
      .prefix-icon{
        margin-right: 5px; /* 图标和竖线之间的间距 */
      }
      .icon-separator{
        width: 1px;
        height: 14px; /* 竖线的高度 */
        background-color: #ccc; /* 竖线的颜色 */
        margin-right: 5px; /* 竖线和输入框内容之间的间距 */
      }
    }
    
    .regist-btn{
      width: 100%;
      margin-top: 20px;
      font-family: '黑体', sans-serif;
      font-weight: bold;
    }
    .login-link{
      margin-top: 20px;
      text-align: center;
      a{
        color: #409eff;
        text-decoration: underline;
      }
    }
  }
}
</style>